<script setup lang="ts">
import {computed, inject, ref, watch} from "vue";
import {Message} from "@arco-design/web-vue";
import workOrder from '@/api/logistics/workOrder'
import { getDictData } from '@/utils/crud/dict'
const size = ref('small');
const crudRef = inject('WorkOrder')
const record = inject('record')
const refreshRecode = inject('refreshRecode')
const edit = ()=>crudRef.value.crudFormRef.edit(record.value)
const InfoDataLeft = ref([])
const InfoDataRight = ref([])
watch(record, (value) => {
  if(value.id == undefined){
    return;
  } 
  console.log('刷新基础信息--'+record.value.id)
   InfoDataLeft.value =  [
      {label: '关联单号：', value: record.value.about_id,},
      {label: '关联单号类型：', value: getDictData('about_type',record.value.about_type,crudRef)},
      {label: '用户可见：', value: record.value.user_visible == 1 ? '是' : '否'},
    ]
   InfoDataRight.value = [
      {label: '创建人：', value: getDictData('created_by',record.value.created_by,crudRef)},
      {label: '关注者：', value: getDictData('created_by',record.value.admin,crudRef)},
      {label: '描述：', value: record.value.remark},
    ]
})
const workClose = async ()=>{
  await workOrder.close(record.value.id,{status:3})
  refreshRecode()
  crudRef.value.refresh()
  Message.success('工单完成')
}
</script>
<template>
  <a-grid-item :span="{xs: 1, sm: 3}">
    <a-collapse :default-active-key="['1']" class="g-collapse" id="work-order-info-base">
      <a-collapse-item header="基础信息" key="1">
        <template #extra>
          <a-button-group>
            <a-button  v-if="record.status != 3" type="primary" size="small" @click.stop="edit" v-auth="['logistics:workOrder:update']"><icon-edit/>编辑</a-button>
            <a-popconfirm
            content="确定要完成工单吗?"
            position="bottom"
            @click.stop=""
            @ok="workClose()"
          >
            <a-button v-if="record.status != 3" type="primary" status="success" size="small" v-auth="['logistics:workOrder:close']"><icon-check/>完成工单</a-button>
            </a-popconfirm>
          </a-button-group>
        </template>
        <a-row class="">
          <a-col :span="12">
            <a-descriptions  :data="InfoDataLeft" :size="size" :column="1"  />
          </a-col>
          <a-col :span="12">
            <a-descriptions  :data="InfoDataRight" :size="size" :column="1"  />
          </a-col>
        </a-row>
      </a-collapse-item>
    </a-collapse>
  </a-grid-item>
</template>

<style scoped>
#work-order-info-base{
  height:100%;
}
</style>